<script setup lang="ts">
import type { FormInstance } from '@arco-design/web-vue'
import { Message } from '@arco-design/web-vue'
import OrgTypeSelect from './OrgTypeSelect.vue'
import OrgTreeSelect from './OrgTreeSelect.vue'
import { OrgApi } from '@/apis'
import { useForm } from '@/hooks'
import * as Regexp from '@/utils/regexp'

const emit = defineEmits<{
  (e: 'save-success'): void
}>()

const dataId = ref('')
const isUpdate = computed(() => !!dataId.value)
const formRef = ref<FormInstance>()

const { form, resetForm } = useForm({
  name: null,
  shortName: null,
  code: null,
  parentId: '0',
  orgType: 'CAMPUS',
})

const rules: FormInstance['rules'] = {
  parentId: [{ required: true, message: '请选择上级组织' }],
  name: [{ required: true, match: Regexp.Name, message: '名称只能含有中文、数字、英文、下划线、短横线，长度为2-32位' }],
  shortName: [{ required: false, match: Regexp.Name, message: '名称只能含有中文、数字、英文、下划线、短横线，长度为2-32位' }],
  code: [{ required: false, match: Regexp.Code, message: '编码只能含有英文、数字、下划线、短横线，以字母开头，长度为2-32位' }],
}

// 重置
const reset = () => {
  formRef.value?.resetFields()
  resetForm()
}

const visible = ref(false)
// 新增
const onAdd = () => {
  reset()
  dataId.value = ''
  visible.value = true
}

// 修改
const onUpdate = async (id: string) => {
  reset()
  dataId.value = id
  const res = await OrgApi.getDetail(id)
  Object.assign(form, res)
  visible.value = true
}

// 保存
const save = async () => {
  try {
    const isInvalid = await formRef.value?.validate()
    if (isInvalid) {
      return false
    }
    if (isUpdate.value) {
      await OrgApi.update(form, dataId.value)
      Message.success('修改成功')
    } else {
      await OrgApi.create(form)
      Message.success('创建成功')
    }
    emit('save-success')
    return true
  } catch {
    return false
  }
}

defineExpose({ onAdd, onUpdate })
</script>

<template>
  <ProDrawer
    v-model:visible="visible"
    title="创建组织"
    @before-ok="save"
    @close="reset"
  >
    <a-form ref="formRef" layout="vertical" :model="form" :rules :readonly="false">
      <a-alert title="部门与校区的关系" class="mb-xs">
        部门和校区是组织架构中的两种组织类型，校区指的是分校、教学点等，部门是按职能划分的组织，如教学部、财务部等。
      </a-alert>

      <a-row :gutter="28">
        <readonly-form-item field="orgType" :span="24">
          <OrgTypeSelect v-model="form.orgType" />
        </readonly-form-item>
        <readonly-form-item label="上级组织" field="parentId" :span="24">
          <OrgTreeSelect v-model.trim="form.parentId" />
        </readonly-form-item>
        <readonly-form-item label="名称" field="name" :span="24">
          <a-input v-model.trim="form.name" placeholder="请输入名称" :max-length="32" show-word-limit />
        </readonly-form-item>
        <readonly-form-item label="简称" field="shortName">
          <a-input v-model.trim="form.shortName" placeholder="请输入简称" :max-length="32" />
        </readonly-form-item>
        <readonly-form-item label="组织编码" field="code">
          <a-input v-model.trim="form.code" placeholder="请输入编码" :max-length="32" />
        </readonly-form-item>
        <readonly-form-item label="负责人" field="leaderId">
          <EmployeeSelect v-model.trim="form.leaderId" />
        </readonly-form-item>
        <readonly-form-item label="联系电话" field="telephone">
          <a-input v-model.trim="form.telephone" placeholder="请输入电话号码" :max-length="32" />
        </readonly-form-item>
        <readonly-form-item label="地址" field="address" :span="24">
          <a-textarea v-model.trim="form.address" placeholder="请输入地址" :max-length="128" show-word-limit />
        </readonly-form-item>
      </a-row>
    </a-form>
  </ProDrawer>
</template>

<style lang="less" scoped></style>
